Rodrigo

Hi, Again, this is not the simplest thing to achieve. TBH I can't think of a simple way to do this without spending quite some time. Unfortunately we don't have the time resources to provide general consulting and resolve complex logic issues. The main issue is this, you have a running animation then scrolltrigger will take those elements and start animating them in the same way that the animation is working. By default ScrollTrigger will take the animation from progress: 0 to 1 for the scroll amount defined by the start/end points in the ScrollTrigger config. The problem arises to move the progress smoothly to one or somehow force the ScrollTrigger instance to start with the progress the animation has when the ScrollTrigger instance becomes active. Maybe another way is to just forget about animating the same properties with ScrollTrigger and just find a way to update the time value of the looping animation using ScrollTrigger's onUpdate callback and pause the looping animation using the onEnter callback and resume the animation using the onLeaveBack callback. I came up with this option as I was writing this, but unfortunately I don't have time right now to create something a quick proof of concept. I'll see if I can create something in the upcoming days and in the meantime you can get a crack at it and see what you can come up with. Happy Tweening!

Hi, The simplest thing is to disable the scroll while that initial animation is running to prevent the user from scrolling, like a loading/splash screen, is just a 1.4 seconds wait, I don't think that there would be such a bad UX especially since the user can see some sort of initial setup. Other than that, yeah that would require a bit of custom logic in order to achieve that. Unfortunately we don't have the time resources to provide free general consulting or solving complex logic issues. Also I would advice you to use contextSafe for that method you're using to create the ScrollTrigger instance: const { contextSafe } = useGSAP(() => { gsap.fromTo(".selector", { //... onComplete: setUpScrollTrigger, }); }, { scope: container, dependencies: [isOpen, isReady] }); const setUpScrollTrigger = contextSafe(() => { gsap.fromTo(element, { //... scrollTrigger: { //... } }); }); Hopefully this helps. If you keep having issues, please create a minimal demo, using one of the starter templates we have on Stackblitz: https://stackblitz.com/@gsap-dev/collections/gsap-react-starters Happy Tweening!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/jOoYEXr Still you need to have some control, at least over the styles of the footer element. Without any level of control over that, there is little that can actually be done. Hopefully this help. Happy Tweenin!

Hi, This most likely has to do with cleanup after the transition is completed. I would loook into Barba's API, most specifically hooks and lifecycle in order to know exactly where to remove all GSAP & ScrollTrigger instances after the leave animation of the current view are completed and when the enter animation of the new view is completed to create the GSAP & ScrollTrigger instances. https://barba.js.org/docs/advanced/hooks/#Base-hooks https://barba.js.org/docs/getstarted/lifecycle/ Unfortunately I don't have any experience with Barba. On the other hand @Ihatetomatoes created a series of videos that integrates GSAP into Barba's transitions, so I would recommend you to check it out: Finally you could look into Stackblitz for creating a demo of your app so we can have a better look: https://stackblitz.com Hopefully this helps Happy Tweening!

Hi @ryanmac and welcome to the GSAP Forums! Basically you have an issue of where you're removing the event listener, you're creating a return statement inside the forEach loop, that actually is not going to do anything in there: useGSAP( (context, contextSafe) => { const itemsArray = gsap.utils.toArray(".skew-item"); //... itemsArray.forEach((item) => { gsap.fromTo( // ... ); const handleClick = contextSafe(() => { //... }); item.addEventListener("click", handleClick); return () => { item.removeEventListener("click", handleClick); }; }); // ... }, { scope: mainRef, dependencies: [] } ); The return statement should be at the top of the useGSAP hook's callback: useGSAP( (context, contextSafe) => { const itemsArray = gsap.utils.toArray(".skew-item"); let handleClick; //... itemsArray.forEach((item) => { gsap.fromTo( // ... ); handleClick = contextSafe(() => { //... }); item.addEventListener("click", handleClick); }); // ... return () => { itemsArray.forEach((item) => item.removeEventListener("click", handleClick)); }; }, { scope: mainRef } ); Also there is no need to pass an empty array as dependencies in the config object of the useGSAP hook, if no array is passed, the hook uses an empty array by default. Finally if you keep having issues, please create a minimal demo using this starter template of our Stackblitz collection: https://stackblitz.com/edit/gsap-react-basic-f48716 Here is our Stackblitz collection just in case you want to check other demos: https://stackblitz.com/@gsap-dev/collections/gsap-react-starters Hopefully this helps. Happy Tweening!

Hi @javierh and welcome to the GSAP Forums! Is super hard for us to debug a live production/test site since there is too much content for us to debug and we're not able to fiddle with it, that's why we request a minimal demo, in order to speed up the support process. We do understand that working with wordpress doesn't make creating a small demo super easy. For what I can see in the live site is that there is a clear layout shift before the markers appear. I would look into that first and see where that's coming from and what's causing it. Also there are reports that using wordpress with elementor sometimes can introduce some styling that interferes with some calculations by ScrollTrigger. Also inspecting the HTML with devtools I saw a couple of things that caught my attention: You're using GSAP and ScrollTrigger 3.12.2, we're currently on version 3.12.5, so I'd recommend you to update to the latest version and see if that helps. You're a jquery sticky plugin. Are you setting the position of a specific element that is being animated with GSAP or pinned with ScrollTrigger to sticky? I'd also try to avoid that. Finally what you could try is to start removing some parts and bits of your code, maybe wordpress plugins or other stuff and see of that helps somehow. Sorry I can't be of more assistance, but as I mentioned before the constraints that wordpress creates makes it a bit harder for us to give the proper support. Hopefully this helps. Happy Tweening!

Hi, Honestly I couldn't really tell you. After fiddling with your demo and finding the same behaviour locally, this seems to solve it: const createTimeline = () => { flipCtx && flipCtx.revert(); flipCtx = gsap.context(() => { const secondState = Flip.getState(".video-middle-container"); const thirdState = Flip.getState(".video-final-container"); const flipConfig = { ease: "none", duration: 1, }; const tl = gsap.timeline({ scrollTrigger: { trigger: ".hero", endTrigger: ".our-projects", start: "bottom bottom", end: "bottom bottom", immediateRender: false, scrub: true, markers: true, } }); tl .add(Flip.fit(".hero-video", secondState, flipConfig)) .add( Flip.fit(".hero-video", thirdState, flipConfig), "+=0.5" ); // THIS 👇 gsap.set(".hero-video", { clearProps: "all" }); }); }; Give that a try and let us know how it works. Hopefully this helps Happy Tweening!

Hi @Noetik and welcome to the GSAP forums! I fiddled with your demo and completely removed ScrollSmoother and I can still see the issue you mention. This mostly seems like a rendering issue rather than a GSAP specific issue. In fact if I scroll this page I can actually see the borders flickering, so is not really necessary to scroll the embedded codepen to see the problem which reinforces the perception that this is a browser rendering issue. Sorry I can't be of more assistance. I'll see if I can dig something in the subject and report back. Happy Tweening!

Hi, I would try to avoid calling the refresh method recursively like that. There is a lot that goes on when that happens and it could lead to some bad UX if the user starts scrolling before the refresh method is called. If possible disable scrolling, wait a full second, allow scrolling again and call the refresh method then. Happy Tweening!

Hi Actually my demo works by adding a specific amount of pixels to the height of each section, so before doing that you can set the height of each section parent to the height of the section, without that offset amount. This should work regardless the natural height of each section. This because I'm using relative values here gsap.set(section, { height: "+=" + offset }); That adds the offset value toe the height of the section, as I mentioned before. Hopefully this clears things up Happy Tweening!

Hi, Advanced Staggers is what you need: https://gsap.com/resources/getting-started/Staggers Here is a fork of your demo using a from instance and a random sequence for the grid: https://codepen.io/GreenSock/pen/zYQPLOg Hopefully this helps. Happy Tweening!

Hi, Sorry but without a minimal demo there is not a lot we can do. If you want an animation to take longer using scrub: true the only way is to increase the amount of pixels between the start and end triggers in your ScrollTrigger configuration or pinning a parent element. There could be other ways but without a demo that clearly illustrates what you're trying to do and where you're getting an issue, is really hard for us to tell. Happy Tweening!

This is when having MDN in your bookmarks is a great idea, no matter how many years you've been in development those resources always help 😉 https://developer.mozilla.org/en-US/docs/Web/API/Element/closest Happy Tweening!

Hi @carpicoder and welcome to the GSAP forums! I think Flip's fit() method is the best choice here: https://gsap.com/docs/v3/Plugins/Flip/static.fit() Here is a simple demo that moves one element to two other different locations using a scrubbed ScrollTrigger instance: https://codepen.io/GreenSock/pen/JjVPyxd Hopefully this helps. Happy Tweening!

Hi @Cristian Front / @Cristian Rojas You already created a thread for the same issue with a different user account: An answer has been provided there so please, let's keep the discussion in that thread so we can focus our attention in just one of them. Finally, please do not create more accounts with the intention of getting a faster answer. We thrive in answering every thread in less than 24 hours in order to provide our users with the best possible support, so creating one thread or replying in just one, is more than enough to get support in these forums. Happy Tweening!